<template>
  <comcard>
    <div slot="com_title" class="con">
        <div>商品分类</div>
        <div><el-button type="primary"  @click="dialogFormVisible = true">添加</el-button></div>
    </div>
    <div slot="com_content">
      <el-table :data="dataSource" style="width: 100%">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column prop="cateName" label="商品名称"> 
            <template #default="{row}">
                <div v-show="!row.flag">{{row.cateName}}</div>
                <el-input v-show="row.flag" type="text" v-model="row.cateName" size="small"></el-input>
            </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="{row}">
              <el-switch
            v-model="row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="!row.flag"
          >
          </el-switch>
          </template>
        </el-table-column>
        <el-table-column lable="操作">
          <template slot-scope="{ row }">
            <el-button :type="row.flag?'primary':'warning'" @click="goEdite(row)">{{row.flag?'完成':"修改"}}</el-button>
            <el-button type="warning" @click="goodsdel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchObj.currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="searchObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加分类弹框 -->
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
  <el-form :model="formObj">
    <el-form-item label="分类名称">
      <el-input v-model="formObj.cateName"></el-input>
    </el-form-item>
     <el-form-item label="是否启用">
            <el-switch
              v-model="formObj.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure()">确 定</el-button>
  </div>
</el-dialog>
    </div>
  </comcard>
</template>

<script>
import Comcard from "../../components/comcard";
import { api_query,api_update,api_goodsadd,api_delcate } from "../../api/goodType";
export default {
  components: {
    Comcard,
  },
  data() {
    return {
      dataSource: [],
      searchObj: {
        currentPage: 1,
        pageSize: 2,
        total: 0,
      },
      flag:false,
      dialogFormVisible: false,
       formObj: {
        cateName: "",
        state: true,
      },
    };
  },
  mounted() {
    this.query();
  },

  methods: {
     //删除
    goodsdel(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async ()=>{
        // 发送根据id删除的api
          let rst= await api_delcate({id});
          let {code}=rst;
          if(code==0){
            this.query();
          }
        },()=>{
            this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        })
    },
    async sure(){
      this.dialogFormVisible = false;
     let rst= await api_goodsadd(this.formObj);
     console.log(rst);
     this.query();
    },
    async query() {
      let rst = await api_query(this.searchObj);
      console.log(rst);
      let { total, data } = rst;
        // 在data中添加status属性,和添加flag控制开关
        let arr=data.map(item=>{
            item.status=item.state==1?true:false;
            item.flag=false;
            return item;
        })
        console.log(arr);
      this.dataSource = arr;
      this.total = total;
    },
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },
    async goEdite(row){
        if(row.flag){
            let rst= await api_update({id:row.id,cateName:row.cateName,state:row.status});
            console.log(rst);
            let{code,msg}=rst;
            if(code==0){
                this.$message.success(msg);
            }else{
                  this.$message.Error(msg);
            }
        }
        row.flag=!row.flag;
    }
    
  },
};
</script>

<style lang="less" scoped>
.con{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>

